<!--智慧消防V1.0-list页面-->
<template>
  <div class="app-container">
    <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline filter-container">
      <!--搜索按钮--新增按钮-->
      <el-form-item style="margin-bottom: 0">
        <el-button type="success" icon="el-icon-plus" class="filter-item" @click="handleAdd()">新 增</el-button>
      </el-form-item>
    </el-form>

    <tree-table :loading="listLoading" :data="permissionData" :columns="columns">
<!--      <el-table-column prop="name" label="资源名称" align="center"/>-->
      <el-table-column prop="type" label="资源类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.type == 'menu' ? '菜单' : '按钮' }}
        </template>
      </el-table-column>
      <!--            <el-table-column prop="permission" label="权限标识" align="left" ></el-table-column>-->
      <el-table-column prop="icon" label="资源图标" align="center">
        <template slot-scope="scope">
          <i :class="scope.row.icon" style="font-size: 20px"></i>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="资源链接" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="description" label="资源描述" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="是否可用" align="center">
        <template slot-scope="scope">
          {{ scope.row.status ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" align="left" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!--编辑按钮-->
          <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" :loading="deleteLoading"
                     @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </tree-table>
  </div>
</template>

<script>
import TreeTable from "@/components/treeTable/index.vue";
import {deleteInPermission, initPermission} from "@/api/role";

export default {
  name: "permissionList",
  components: {TreeTable},
  data() {
    return {
      searchForm: {
        deleted: false,
        userType: 0
      },
      activeName: '1',
      listLoading: false,
      permissionData: [],
      columns: [
        {
          value: 'name',
          text: '资源名称'
        }
      ],
      deleteLoading:false
    }
  },
  created() {
    this.activeName = this.$route.query.type || "1"
    this.initPermission()
  },
  methods: {
    //初始化列表信息数据
    initPermission() {
      if (this.activeName == '1') {
        this.searchForm.userType = 0
      } else {
        this.searchForm.userType = 1
      }
      this.listLoading = true
      initPermission(this.searchForm).then(res => {
        // console.log(res.data)
        this.listLoading = false
        this.permissionData = res.data
        this.$notify.success({
          title: '成功',
          message: "获取资源数据成功"
        })
      }).catch(error => {
        this.listLoading = false
        this.$notify.error({
          title: '失败',
          message: error.msg
        })
      })
    },
    //新增资源按钮
    handleAdd() {
      this.$router.push("/sys/permissionedit/0")
    },
    //编辑
    handleEdit(val) {
      this.$router.push("/sys/permissionedit/"+val.ucId)
    },
    //删除
    handleDelete(val){
      this.$confirm('确定删除？', '提醒信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteLoading = true
        // console.log(this.deleteLoading)
        deleteInPermission({ucId:val.ucId}).then(res=>{
          this.deleteLoading = false
          this.$notify.success({
            title: '成功',
            message: "删除主体成功"
          })
          this.initPermission()
        }).catch(res=>{
          this.deleteLoading = false
          this.$notify.error({
            title: '失败',
            message: res.msg
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClick(val) {
      //切换功能
      this.initPermission()
    }
  }
}
</script>

<style scoped>

</style>
